<template>
	<div class="common-layout">
		<el-container>
			<!-- 头部 -->
			<el-header style="background-color: #e8eaed;">
				<div class="header">
					<h1>校园闲置app后端</h1>
					<div class="hright">
						<img :src="avater">
						<el-dropdown split-button type="primary" @click="handleClick">
							退出登录
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item @click="gotoinfo">个人设置</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
				</div>
			</el-header>
			<el-container>
				<!-- 侧边栏 -->
				<el-aside width="200px">
					<el-menu router active-text-color="#ffd04b" background-color="#2f3035" class="el-menu-vertical-demo"
						height="100%" default-active="welcome" text-color="#fff" @open="handleOpen"
						@close="handleClose">
						<el-menu-item index="welcome">
							<el-icon>
								<HomeFilled />
							</el-icon>
							<span>欢迎</span>
						</el-menu-item>
						<el-menu-item index="homepage">
							<el-icon>
								<HomeFilled />
							</el-icon>
							<span>数据报表</span>
						</el-menu-item>
						<el-sub-menu index="1">
							<template #title>
								<el-icon>
									<User />
								</el-icon>
								<span>用户管理</span>
							</template>
							<el-menu-item index="loweruser">
								<el-icon>
									<User />
								</el-icon>
								<span>前台用户</span>
							</el-menu-item>
							<el-menu-item index="adminuser">
								<el-icon>
									<User />
								</el-icon>
								<span>后台用户</span>
							</el-menu-item>
						</el-sub-menu>
					</el-menu>
				</el-aside>
				<!-- 内容区域 -->
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup>
	import router from '@/router';
	import {
		ArrowDown,
		HomeFilled,
		User
	} from '@element-plus/icons-vue'
	import axios from '../api/index.js';
	import {
		ElMessage
	} from 'element-plus'
	import {
		onMounted,
		ref
	} from 'vue';
	let id = localStorage.getItem("_id")
	let avater = ref("")
	onMounted(() => {
		axios.get("http://localhost:3366/zjb/myinfo/" + id).then(({
			data
		}) => {
			avater.value = data.data.avater
			ElMessage.success("欢迎进入，" + data.data.username)
		})
	})

	const handleClick = () => {
		ElMessage({
			message: '退出成功',
			type: 'success',
		})
		localStorage.removeItem("token")
		router.push("/login")
	}
	const gotoinfo = () => {
		router.push("/home/admininfo")
	}
</script>

<style scoped lang="less">
	.common-layout,
	.el-container {
		height: 100vh;
	}

	.el-main {
		padding: 0;
	}

	.el-aside,
	.el-menu {
		height: 100%;
	}

	.header {
		display: flex;
		justify-content: space-between;
		line-height: 60px;

		.hright {

			img {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				vertical-align: middle;
			}

			.el-dropdown {
				line-height: 60px;
				margin-left: 15px;
				vertical-align: middle;
			}
		}
	}
</style>